<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
       #main{
            width: 400px;
            
            margin:0 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
           
        }
       #textarea{
        width: 400px;
       }
        #div{
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            overflow: auto;
           word-wrap: break-word;
           overflow: auto;
        }
        #main-bottom {
           
            display: flex;
            justify-content: center;
        }
        #main-bottom  #reset{
            margin-right: 20px;
        }
        .div2{
           
            margin-bottom: 20px;
           display: flex;
           justify-content: flex-end;
           margin-right: 10px;
           
        }
        .text{
            line-height: 18px;
            /* width: 360px; */
            background: pink;
           margin: 0;
           margin-right: 10px;
            display:inline-block;
            border:1px solid #000; 
            word-break: break-all;
            word-wrap: break-word;
            
        }
        .logo{
            width: 20px;
            height: 20px;
            background: #000;
           
            margin: 0;
           
            
           
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="div"></div>
        <textarea name="" id="textarea" cols="32" rows="10"></textarea>
     </div>
     <div id="main-bottom">
            <button id="reset" >重置
            <button id="submit" >提交
     </div>
     <script>
         function $(e){
             return document.querySelector(e);
         }
         $('#textarea').onkeyup=function(e){
             if(e.keyCode ==13&&e.ctrlKey){
                //  $('#div').innerText=this.value;
                var div2=document.createElement('div');
                 var logo=document.createElement('div');
                 var text=document.createElement('div');
                 div2.className='div2';
                 text.className='text';
                 logo.className='logo';
                 div2.appendChild(text);
                 div2.appendChild(logo);
                 text.innerText=this.value;
                 $('#div').appendChild(div2);
             }
         }
         $('#submit').onclick=function(){
                 var div2=document.createElement('div');
                 var logo=document.createElement('div');
                 var text=document.createElement('div');
                 div2.className='div2';
                 text.className='text';
                 logo.className='logo';
                 div2.appendChild(text);
                 div2.appendChild(logo);
                 text.innerText=$('#textarea').value;
                 $('#div').appendChild(div2);
                 $('textarea').value='';
                //  var w=$('#div').offsetWidth-2-$('.logo').offsetWidth-20;
                //  if(w>=360){
                //     w=360+'px';
                    
                //  }else{
                //      w=$('.text').offsetWidth;
                //  }
                //  $('.text').style.width=w;
                //  console.log(w);
              
         }
         $('#reset').onclick=function(){
            $('textarea').value='';
         
         }
     </script>
</body>
</html>